0
221
Views¿Por qué tengo que usar "usar" antes del enlace personalizado en reaccionar?
¿Por qué tenemos que usar use antes del gancho personalizado? ¿Es esto solo una convención de nomenclatura o hay algo que React está haciendo internamente para hacer algo especial?
Creé dos ganchos personalizados useCustomHook y customHook , ambos se definen a continuación. Uno con use de prefijo y otro sin él. pero al usar useState hook en customHook eslint da un error como:
por qué está dando un error. Dado que el gancho personalizado es solo una función normal en la que podemos usar otros ganchos. A continuación se muestra la regla de React docs.
A diferencia de un componente React, un Hook personalizado no necesita tener una firma específica. Podemos decidir lo que toma como argumentos, y lo que, en todo caso, debe devolver. En otras palabras, es como una función normal. Su nombre siempre debe comenzar con uso para que pueda saber de un vistazo que se aplican las reglas de Hooks.
useCustomHook: with use Prefix
import { useState } from "react"; export default function useCustomHook(initialValue) { const [value, setValue] = useState(initialValue); function changeValue() { setValue((v) => v + 100); } return [value, changeValue]; } customHook: without use Prefix
import { useState } from "react"; export default function customHook(initialValue) { const [value, setValue] = useState(initialValue); function changeValue() { setValue((v) => v + 100); } return [value, changeValue]; }3 answers
Answer question0
Es solo una convención de nomenclatura.
Sin embargo, los documentos son un poco engañosos:
En otras palabras, es como una función normal.
Es como una función normal, pero con el equipaje adicional de que, a diferencia de una función normal, dentro de una función pensada como un enlace personalizado, puede llamar a otros enlaces dentro de ella, y si intenta llamarlo como una función simple fuera del contexto de React , y usa ganchos adentro, fallará.
La parte que citó muestra por qué la convención de nomenclatura es como es:
Su nombre siempre debe comenzar con uso para que pueda saber de un vistazo que se aplican las reglas de Hooks.
De esta manera, será mucho más obvio de un vistazo que es un componente que invoca ganchos que debe seguir las reglas, en lugar de uno que no invoca ganchos.
Imaginar
const MyComponent = ({ checkThing }) => { if (checkThing) { verifyThing(); } Lo anterior sería un código no válido si verificar la verifyThing fuera un enlace personalizado. Si se cambió el nombre para seguir las convenciones que recomiendan los documentos y el linter:
const MyComponent = ({ checkThing }) => { if (checkThing) { useVerifyThing(); } se vuelve obvio que hay un problema, sin siquiera tener que saber nada acerca de lo que significa o hace verificar la verifyThing / useVerifyMean Medio. Ese es el principal beneficio de prefijar ganchos personalizados con use : eso le dice a usted y a otros usuarios del gancho que siempre debe llamarse incondicionalmente en el cuerpo principal de un componente funcional, lo cual es más útil que estropearlo en algún lugar y accidentalmente llamarlo a otro lugar y tener que trabajar hacia atrás desde un error de tiempo de ejecución para solucionarlo.
0
Esta es solo una regla ESLint del complemento eslint-plugin-react-hooks .
La regla, como todas las reglas de linter (análisis estático), es una guía para ayudarlo a producir código fácil de mantener y comprensible. No se aplica en la compilación ni en el tiempo de ejecución.
Por ejemplo, si simplemente deshabilitara el linter, encontraría que su aplicación se ejecuta sin errores
const [value, setValue] = useState(initialValue); // eslint-disable-line react-hooks/rules-of-hooks0
esta es una regla como otros lenguajes, por ejemplo, en rust o c ++, tenemos que usar punto y coma al final del código, por lo que este es un gancho de reacción y cuando lo usamos debe comenzar con una letra mayúscula, pero la segunda es la función javascript y no tiene esa regla